<template>
  <div>
    <table class="table1 owntable mb20 tableLayout" border="0" cellspacing="0" cellpadding="1" width="100%">
      <tr>
        <td width="150">产品灭菌管理编号</td>
        <td>{{ item.number }}</td>
        <td width="150">灭菌类别</td>
        <td>{{ item.cleanType==0?'原材料':item.cleanType==1?'中间品':'成品' }}</td>
      </tr>
      <tr>
        <td>{{item.cleanType==0?'原材料批号':'生产批号'}}</td>
        <td>{{ item.batchNumber }}</td>
        <td>管理部门</td>
        <td>{{ item.manageDeptName }}</td>
      </tr>
      <tr>
        <td>负责人</td>
        <td>{{ item.manageUserName }}</td>
        <td>编制部门</td>
        <td>{{ item.createDeptName }}</td>
      </tr>
    </table>

    <div class="mb20"> {{item.cleanType==0?'原材料信息如下：':item.cleanType==1?'中间品信息如下：':'成品信息如下：'}}</div>

    <div v-for="(v, index) in item.cleanList" :key="index">
      <table class="table1 owntable mb20 tableLayout" border="0" cellspacing="0" cellpadding="1" width="100%">
        <tr>
          <td>{{ item.cleanType==0?'原材料名称':item.cleanType==1?'中间品名称':'产品名称' }}</td>
          <td>{{ v.productName }}</td>
          <td>{{ item.cleanType==0?'原材料规格':item.cleanType==1?'中间品规格':'产品规格' }}</td>
          <td>{{ v.productSku }}</td>
        </tr>
        <tr>
          <td>{{ item.cleanType==0?'原材料编号':item.cleanType==1?'中间品编号':'产品代码' }}</td>
          <td>{{ v.productCode }}</td>
         <td>数量</td>
         <td>{{ v.qty }} {{v.unit}}</td>
        </tr>
        <tr>
          <td>是否使用设备</td>
          <td colspan="3">
            <span>{{ v.deviceList && v.deviceList.length != 0 ? '是' : '否' }}</span>
            <el-button type="primary" plain @click="item.showmore = !item.showmore">
              {{ item.showmore ? '收起设备详情' : '展开设备详情' }}
              <i :class="{ 'el-icon-arrow-down': !item.showmore, 'el-icon-arrow-up': item.showmore }"></i>
            </el-button>
          </td>
        </tr>
      </table>
      <table class="table1 owntable mb20 deviceCon tableLayout" border="0" cellspacing="0" cellpadding="1" width="100%" v-if="item.showmore">
        <tr>
          <td>设备名称</td>
          <td>设备型号</td>
          <td>设备编号</td>
        </tr>
        <tr v-for="(m, i) in v.deviceList" :key="i">
          <td>{{ m.deviceName }}</td>
          <td>{{ m.deviceModel }}</td>
          <td>{{ m.deviceNumber }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {}
  }
};
</script>

<style scoped lang="scss">
.deviceCon {
  tr,
  td {
    background: #d9e5f0 !important;
  }
}
</style>
